<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<!-- 文本格式化属性针对文本相关操作（四种方式10个属性） 
		1.控制字体：font-family font-size、font-weight
		2.控制文本布局：text-align、line-height、letter-spacing、word-spacing
		3.文本修饰效果：text-decoration、text-shadow
		4.处理文本效果：white-space
		-->
		<style>
			/* css3语法：选择器 {
				         属性： 属性值;
						 属性： 属性值;
						 ......
			            }
			            叫法：一个样式
			*/
		   bod y div#d1{ /* 通过加权方式，锁定元素   权值：102*/
			   color: #55ff00;
			   /* 知识点1：文本格式化属性控制字体 
			    font-family: 字体家族，指定字体形式
			   */
			   font-family: 华文彩云,sans-serif;
			   /* 设置多个字体：浏览器会按照顺序寻找可用字体
				用户体验，用户系统有什么字体，优先指定字体
				通常与通配选择器使用   *{}
				*/
			   /* 知识点2：文本格式化属性控制字体
			   font-size:字体大小属性，与单位共存
			   单位 px 像素    使用特点：绝对值、PC端
			        em 相对单位，理解：倍数
					           使用特点：相对于元素按照倍数方式、移动端
			   */
		      /* 知识点3：文本格式化属性控制字体
		   font-weight:字体粗细属性，不存在单位
		   属性值：数值【100 200 300 ... 900】
		           常用数值：400
				    单词【400==normal、bold、light 】
			使用方法：统配选择器搭配使用：指定全局字体正常字体粗细		
			*/
		     font-weight: 900;
		     font-size: 2em;
		    /* 补充：1.英文大写，2.首字母大写，3.段落开始间距200px */
		     text-transform:uppercase;
			 text-transform:capitalize;
			 text-indent: 200px;
		     }
			
			div#d1{ /* 通过加权方式，锁定元素   权值：101*/
			   color:#2f0aaa;
			   /* 知识点4：文本格式化属性控制文本格式【对齐、间隙】
				text-align:left|right|center|justify:两端对齐,用于弹性布局
				*/
			   text-align:justify;
			   /* 
			   知识点5：文本格式化属性控制文本格式
			   行高属性line-height:文本垂直效果
				使用方式：1.高度属性:属性值一致
				         2.在高度属性上加行高属性：属性值一致
				*/
			   border: 1px solid red;
			   height: 100px;
			   line-height: 100px;
			   /* 补充：文本对齐和行高属于对齐|间隙：字符和单词之间距离 */
			   /* 知识点6：letter-spacing:设置字符之间间隙
				  知识点7：word-spacing:设置单词之间间隙
				*/
			   letter er-spacing: 10px;
			   word-spacing: 2px;
		   }
			#d1{  /*权值：100*/
				color:#e4393c;
			}
			  a.c1{ /*权值：11*/
				/* 知识点8：text-decoration 修饰超链接样式
				使用方法：与通配符一起使用，设置全局页面超链接样式
				属性值：none|underline|line-through
				 */
				text-decoration: line-through;
				/* 知识点9：text-shadow 修饰文本阴影
				属性值：X轴 Y轴  blur模糊距离 color
				*/
			    text-shadow: 5px 5px 5px #ff0;
				}
			p{
				border:1px solid red;
					/* 知识点10：文本换行效果
					 white-space:文本换行属性
					 属性值：
					 nowrap 不换行,只显示一行，超出部分隐藏
					 |pre 保存空格和回车|normal默认，空格合并，换行隐藏
					 */
				white-space:nowrap;
				overflow: hidden;
			}
			</style>
	</head>
	<body>
		<!-- 需求：创建div同时指定别名，添加假文【tab】
		     id选择器，通过加权找到div，添加颜色
		 -->
		 <div id="d1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque, eaque! Ipsum labore, nobis ipsa magni sequi eos quod ipsam architecto quis eaque? Esse, sit ducimus optio nisi eveniet at minus.</div>
		 <hr>
		 <h4>文本修饰效果</h4>
		 <!-- 文本修饰相关属性
		  知识点7：text-decoration属性：设置超链接效果
		  -->
		 <a class="c1 c2" href="http://www.tsgzy.edu.cn">实现跳转【方式：6种】</a>
	    <div style="height:800px;"></div>
		<marquee>
			<h4>处理文本效果</h4>
		</marquee>
		<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt voluptate quaerat modi magnam maxime officia molestiae iusto nihil inventore, aliquam rem veritatis ipsa, quam laborum at reprehenderit totam. Modi, facere! lorem </p>
	</body>
</html>